<template>
  <div>
    <detail-banner
     :sightName="sightName"
     :bannerImg="bannerImg"
     :galleryImgs="galleryImgs"
    ></detail-banner>
    <detail-header></detail-header>
    <div class="content">
      <detail-list :list="list"></detail-list>
    </div>
  </div>

</template>

<script>
  import DetailBanner from './components/Banner'
  import DetailHeader from './components/Header'
  import DetailList from './components/List'
  import axios from 'axios'
    export default {
        name: "Detail",
        components:{
          DetailBanner:DetailBanner,
          DetailHeader:DetailHeader,
          DetailList:DetailList
        },
        data(){
          return {
            list:[],
            sightName:"",
            bannerImg:"",
            galleryImgs:[]//原始传递值用 " "和 [] 表示
          }
        },
        methods:{
          getDetailInfo(){
            axios.get('/api/detail.json',{
              params:{
                id:this.$route.params.id
              }
            })
              .then(this.getDetailInfoSucc)
          },
          getDetailInfoSucc(res){
               res=res.data;
            if(res.ret&&res.data){
                 const data=res.data;
                this.list=data.categoryList;
                this.sightName=data.sightName;
                this.bannerImg=data.bannerImg;
                this.galleryImgs=data.galleryImgs;
              console.log(data)
            }
          }
        },
        mounted(){
            this.getDetailInfo()
        }
    }
</script>

<style lang="stylus" scoped>
  .content
     height:55rem
</style>
